<template>
  <el-table 
    ref="multipleTableRef"
    :data="dataList"
    row-key='id'
    highlight-current-row
    stripe
    :border="true"
    style="width: 100%"
    @selection-change="moreChange"
    @current-change="singleChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="编号" width="80" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="address" label="地址" width="180" />
    <el-table-column prop="telephone" label="电话" width="180" />
  </el-table>
  {{ selection.dataId }}<br>
  {{ selection.dataIds }}<br>
  {{ selection.row }}<br>
  {{ selection.rows }}
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  // import { ElTable } from 'element-plus'

  // 获取父组件的状态
  import { getListState } from '../state/list'
  
  import type { TCompany } from '../type'
  
 
  // 解构出来数据列表页面
  const { dataList, selection }  = getListState<TCompany>()

  // <InstanceType<typeof ElTable>>
  const multipleTableRef = ref()

  const toggleSelection = (rows?: TCompany[]) => {
    if (rows) {
      rows.forEach((row) => {
        // TODO: improvement typing when refactor table
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        multipleTableRef.value!.toggleRowSelection(row, undefined)
      })
    } else {
      multipleTableRef.value!.clearSelection()
    }
  }

  // 多选
  const moreChange = (val: TCompany[]) => {
    selection.rows.length = 0
    selection.rows.push(...val)
    selection.dataIds.length = 0
    selection.dataIds.push(...val.map(arr => arr.id))

  }

  // 单选
  const singleChange = (row1: TCompany | undefined) => {
    if (row1) {
      selection.dataId = row1.id
      Object.assign(selection.row, row1)

      multipleTableRef.value?.setCurrentRow(row1)
    } else {
      selection.dataId = ''
    }
}
  
</script>